<!--考核项详情-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>{{ queryType == 1 ? '面试考核项详情' : '考核项详情' }}</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <!--        // queryType 1 查看面试审核详情， 2 查看考核结果详情 inType archives 档案查看-->
        <!--        0简历待审核1待面试2简历驳回3面试淘汰4试用中5正式员工6试用淘汰7离职中8离职通过9离职驳回-->
        <div class="resruitment-title"><p>面试考核结论</p></div>
        <div v-if="queryType!==1">
          <div v-html="opinion" v-if="opinion">
          </div>
          <div v-else>
            无
          </div>
        </div>
        <div v-else>
          <!--          0简历待审核1待面试2简历驳回3面试淘汰4试用中5正式员工6试用淘汰7离职中8离职通过9离职驳回-->
          <!--          面试详情有，通过的，驳回的-->
          <div v-if="statuss==3">
            {{ detailOption.content }}
          </div>
          <div v-else>
            <div v-html="opinion" v-if="opinion">
            </div>
            <div v-else>
              无
            </div>
          </div>
        </div>
        <div v-if="statuss>=5">
          <div class="resruitment-title"><p>录用审核意见</p></div>
          <div v-html="employ_content" v-if="employ_content"></div>
          <div v-else>无</div>
        </div>
        <div v-if="statuss!==3">
          <div class="resruitment-title"><p>考核项</p></div>
          <div class="boxInterview">
            <!--本体列表，数据 -->
            <el-table
                ref="multipleTable"
                :data="arryList"
                :border="tableoption.tableBorder"
                tooltip-effect="dark">
              <el-table-column
                  label="考核项"
                  align="center"
                  prop="content"
                  :key="1">
              </el-table-column>
              <el-table-column
                  label="考核限期"
                  align="center"
                  prop="end_time"
                  :key="2">
              </el-table-column>
              <el-table-column
                  label="状态"
                  align="center"
                  prop="status"
                  :key="3">
                <template slot-scope="scope">
                  {{ scope.row.is_examine == 0 ? '待评估' : (scope.row.is_examine == 1 ? '已评估（合格）' : '已评估（不合格）') }}
                </template>
              </el-table-column>
              <el-table-column
                  label="考核资料"
                  align="center"
                  prop="status"
                  :key="4"
                  v-if="queryType==2">
                <template slot-scope="scope">
                  <viewerModle type="1" :imgSrc="scope.row.material.pic" v-if="scope.row.material"></viewerModle>
                </template>
              </el-table-column>
              <el-table-column
                  label="考核批注"
                  align="center"
                  prop="status"
                  :key="5"
                  v-if="queryType==2">
                <template slot-scope="scope">
                  {{ scope.row.reason }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="resruitment-title"><p>{{ queryType == 1 ? '面试考核人会签' : '考核人会签' }}</p>
          <el-button @click="signFn" size="mini" type="primary" plain v-if="inType!=='archives'">刷新</el-button>
        </div>
        <div class="boxInterview" v-if="inType!=='archives'">
          <div class="signBox">
            <div class="signList" v-for="item in signList" :key="item.id">
              <img :src="item.pic" alt="" v-if="item.pic">
              <!--                <p>{{`${item.realname}（已会签）`}}</p>-->
              <p>
                <el-tag :type="item.is_autograph?'success':'danger'">
                  {{ item.realname }}{{ item.is_autograph ? '（已会签）' : '（未会签）' }}
                </el-tag>
              </p>
            </div>
          </div>
        </div>
        <div class="boxInterview" v-else>
          <div class="signBox">
            <div class="signList" v-for="item in signList" :key="item.id">
              <img :src="item.pic" alt="">
              <p>{{ `${item.realname}（已会签）` }}</p>
            </div>
          </div>
        </div>
        <div style="height: 50px;"></div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <!--    会签审核人 signType 1 面试签字 2 考核签字-->
    <autograghUser :visible.sync="autograghVisible" @signFn="signFn" :userOption="userOption"
                   :resumeId="resumeId" signType="2"></autograghUser>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import autograghUser from "./autograghUser";

export default {
  // queryType 1 查看面试审核详情， 2 查看考核结果详情 inType archives 档案查看
  props: ['visible', 'queryType', 'resumeId', 'inType'],
  components: {
    autograghUser
  },
  data() {
    return {
      dialogVisible: false,
      arearBox: '',
      tableoption: tableoption,
      editId: this.$route.query,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      approvalVisible: false,
      assessmentId: 0,
      assessmentName: '',
      is_examine: 0,
      signList: [],
      autograghVisible: false,
      userOption: null, // 签名人信息
      opinion: '',
      employ_content: '',
      statuss: 0,
      detailOption: null
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
        this.signFn()
        this.detailFn()
      } else {
        this.arryList = [];
        this.signList = [];
      }
    }
  },
  created() {
  },
  methods: {
    // 初始化 考核批复请款
    async InitFn() {
      let option = {
        resume_id: this.resumeId // 简历id
      };
      console.log('option:', option)
      let data = await this.$fetch(Number(this.queryType) === 1 ? this.api.recruit.examine.index : this.api.recruit.examine.index, option);
      console.log('data:', data)
      for (let i in data.list.data) {
        // 考核资料
        data.list.data[i].material = data.list.data[i].material ? JSON.parse(data.list.data[i].material) : ''
      }
      this.arryList = data.list.data
    },
    // 获取审核人员会签
    async signFn() {
      // id 简历
      let data = await this.$fetch(Number(this.queryType) === 1 ? this.api.recruit.interview.autograph : this.api.recruit.examine.autograph, {id: this.resumeId});
      if (!data.code) {
        this.signList = this.getJson(data.list)
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    async detailFn() {
      let data = await this.$fetch(this.api.recruit.vitae.edit, {id: this.resumeId});
      if (!data.code) {
        console.log('请求会签:', data)
        this.detailOption = data.vo
        this.opinion = data.vo.opinion;
        this.employ_content = data.vo.employ_content;
        this.statuss = data.vo.statuss;
      }
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 70%;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.resruitment-title {
  padding: 20px 0 5px;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.resruitment-title p {
  flex: 1;
}

.boxInterview {
  padding: 0 20px;
}

.tagBox {
  cursor: pointer;
}

.signBox {
  display: flex;
  align-items: center;
}

.signList {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.signList img {
  width: 200px;
  display: block;
  border: 1px solid #f4f4f4;
  margin-bottom: 10px;
}
</style>


